import React, { Component } from "react";
import PropTypes from "prop-types";
import { GridCell, SvgIcons } from "@dnnsoftware/dnn-react-common";
import styles from "./style.module.less";
import Localization from "../../../localization";
import EditUrl from "./EditUrl";
import utils from "../../../utils";

class UrlRow extends Component {
    onDelete(url) {
        const { onDelete } = this.props;
        utils.confirm(
            Localization.get("Pages_Seo_DeleteWarningMessage"),
            Localization.get("Delete"),
            Localization.get("Cancel"),
            function onConfirmDeletion() {
                onDelete(url);
            }
        );
    }

    onOpenEditForm(url) {
        const { editedUrl, onOpenEditForm, onCancel } = this.props;
        const opened = editedUrl && editedUrl.id === url.id;
        if (opened) {
            onCancel();
        } else {
            onOpenEditForm(url);
        }
    }

    render() {
        const { url, siteAliases, primaryAliasId, editedUrl, saving, onChange, pageHasParent,
            onSave, onCancel } = this.props;
        let generatedBy = Localization.get("Pages_Seo_GeneratedByAutomatic");

        if (!url.autoGenerated) {
            generatedBy = url.userName;
        }
        const opened = editedUrl && editedUrl.id === url.id;

        return (
            /* eslint-disable react/no-danger */
            <div className={styles.urlRow + (opened ? " row-opened" : "")} >
                <GridCell columnSize={50} className="url-path">
                    {url.path}
                </GridCell>
                <GridCell columnSize={20} >
                    {url.statusCode.Value}
                </GridCell>
                <GridCell columnSize={20} >
                    {generatedBy}
                </GridCell>
                <GridCell columnSize={10}>
                    {(!url.autoGenerated || url.statusCode.Key !== 200) && url.id !== -1 &&
                        <div className="extension-action"
                            onClick={this.onDelete.bind(this, url)} dangerouslySetInnerHTML={{ __html: SvgIcons.TrashIcon }}></div>
                    }
                    {!url.autoGenerated &&
                    <div className={"extension-action" + (opened ? " active" : "")}
                        onClick={this.onOpenEditForm.bind(this, url)} dangerouslySetInnerHTML={{ __html: SvgIcons.EditIcon }}></div>
                    }
                </GridCell>
                {opened &&
                    <EditUrl url={editedUrl}
                        saving={saving}
                        pageHasParent={pageHasParent}
                        accordion={true} isOpened={opened}
                        onChange={onChange}
                        onSave={onSave}
                        onCancel={onCancel}
                        siteAliases={siteAliases}
                        primaryAliasId={primaryAliasId}
                        className="newUrlContainer" />}
            </div>
            /* eslint-enable react/no-danger */
        );
    }
}

UrlRow.propTypes = {
    url: PropTypes.object.isRequired,
    editedUrl: PropTypes.object,
    pageHasParent: PropTypes.bool,
    siteAliases: PropTypes.arrayOf(PropTypes.object).isRequired,
    primaryAliasId: PropTypes.number,
    saving: PropTypes.bool,
    onOpenEditForm: PropTypes.func.isRequired,
    onChange: PropTypes.func.isRequired,
    onSave: PropTypes.func.isRequired,
    onCancel: PropTypes.func.isRequired,
    onDelete: PropTypes.func.isRequired
};


export default UrlRow;